<template>
  <div>
    <!-- 标题 -->
    <el-row id="title">
      <el-col :span="10">
        <p>"<b>{{activity.name}}</b>"活动参与人员名单</p><br>
        <!-- 批量删除 -->
        <el-button type="danger"
                   @click="deleteAll(handleSelectionChange)">批量删除
        </el-button>
      </el-col>
      <el-col :span="6">
        <img :src="user.image"
             style="width:50px;height:50px;padding-left:70%;padding-top:10%">
      </el-col>
      <el-col :span="8">
        <p>发起人：{{user.account}}</p>
        <p>联系邮箱：{{user.email}}</p>
      </el-col>
    </el-row>
    <!-- 表格主体 -->
    <el-table :data="userData"
              @selection-change="handleSelectionChange"
              ref="multipleTable">
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="用户头像"
                       align="center"
                       prop="image">
        <template slot-scope="td">
          <img :src="td.row.image"
               style="width:50px;height:50px" />
        </template>
      </el-table-column>
      <el-table-column label="用户名"
                       align="center"
                       prop="account"></el-table-column>
      <el-table-column label="用户邮箱"
                       align="center"
                       prop="email"></el-table-column>
      <el-table-column label="操作"
                       align="center">
        <template slot-scope="td">
          <!-- 删除 -->
          <el-button type="danger"
                     size="mini"
                     @click="del(td.$index,td.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from '../../../axios_config';
import Commons from '../../../js/commons'
export default {
  data () {
    return {
      currentUser: {},          //指向当前被选中的user
      dialogVisible: false,     //查询对话框是否显示
      refresh: true,            //强制刷新子组件
      multipleSelection: [],    //每一行数据的选择框
      count: 0,                 //用于技术弹窗次数,为0才弹出
      indexs: [],               //前端批量删除的行数
    }
  },
  methods: {
    //删除
    del (index, row) {
      this.$confirm('您确定要删除该条记录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.get("http://192.168.11.18:8080/activity/delByUid?uid=" + row.id + "&aid=" + this.activity.id)
          .then(res => {
            console.log(res);
            if (res.data.state == "SUCCESS") {
              this.$message({
                type: 'success',
                message: res.data.message
              });
              //从表格中删除当行数据
              this.userData.splice(index, 1);
            } else {
              this.$message({
                type: 'danger',
                message: res.data.message
              });
            }
          });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //批量删除
    deleteAll () {
      this.$confirm('您确定要删除该条记录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = [];
        if (this.multipleSelection.length != 0) {
          this.multipleSelection.forEach(element => {
            ids.push(element.id);
          });
          let params = new URLSearchParams();
          params.append("ids", ids);
          params.append("aid", this.activity.id);
          axios.post("http://192.168.11.18:8080/activity/delBatchByUid", params).
            then(res => {
              if (res.data.state == "SUCCESS") {
                this.$message({
                  type: 'success',
                  message: res.data.message
                });
                //前端删除
                for (let i = 0; i < this.userData.length; i++) {
                  const element = this.userData[i];
                  element.id = i
                }
                this.multipleSelection.forEach(element => {
                  this.userData.forEach((e, i) => {
                    if (element.id == e.id) {
                      this.userData.splice(i, 1);
                    }
                  });
                });
              } else if (res.data.state == "ACTIVITYEND") {
                this.$message({
                  type: 'danger',
                  message: res.data.message
                });
              } else if (res.data.state == "ERROR") {
                this.$message({
                  type: 'danger',
                  message: res.data.message
                });
              }
            })
        } else {
          this.$message.error('请先至少选择一项');
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //多选框将选中数据赋给全局变量
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
  },
  props: [
    //父组件传入多个数据用数组接收
    'activity',
    'userData',
    'user'
  ],
  //当前组件创建完毕时
  mounted () {

  }
}
</script>

<style scoped>
#title {
  font-size: 15px;
}
</style>